<!--
 * @Author: 陈伟 291456440@qq.com
 * @Date: 2022-10-31 09:31:32
 * @LastEditors: 陈伟 chenwei@duoliheng.com
 * @LastEditTime: 2022-11-09 14:45:49
 * @FilePath: \cool.front\src\views\distributionManage\electronic\components\table1.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="table1">
    <el-table :data="tableData" border highlight-current-row @current-change="currentRow">
      <el-table-column type="index" label="序号" width="50" align="center" />
      <el-table-column prop="orgName" label="站点" show-overflow-tooltip width="113" align="left" />
      <el-table-column prop="" label="围栏" width="60" align="center">
        <template slot-scope="scoped">
          <div class="img-container" @click="edit(scoped.row)">
            <img v-show="!scoped.row.isFence" src="@/assets/images/add.svg" alt="">
            <img v-show="scoped.row.isFence" src="@/assets/images/have.svg" alt="">
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="" label="颜色" width="50" align="center">
        <template slot-scope="scoped">
          <colorPicker v-if="scoped.row.fillColor" v-model="scoped.row.fillColor" disabled />
        </template>
      </el-table-column>
      <el-table-column prop="fenceNum" label="子围栏数" width="80" align="center">
        <template slot-scope="scoped">
          <el-link :underline="false" class="img-container" @click.stop="chooseChild(scoped.row)">{{ scoped.row.fenceNum }}</el-link>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: 'table1',
    props: {
      tableData: {
        type: Array,
        default: []
      }
    },
    data() {
      return {
      }
    },
    watch: {
    },
    methods: {
      // 编辑
      edit(row) {
        this.$emit('currentRow', row)
      },
      // 选中行
      currentRow(row) {
        this.$emit('currentRow', row)
      },
      chooseChild(row) {
        this.$emit('currentChild', row)
      }
      // // 选中行
      // currentRow(row) {
      //   this.$emit('currentRow', row)
      // }
      // 搜索
      // search() {
      //   this.$emit('search', this.carId)
      // }
    }
  }
</script>

<style lang="scss" scoped>
.img-container {
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    cursor: pointer;
  }
}
.table1 {
  width: 100%;
  height: 100%;
}
.search {
  margin-bottom: 10px;
}
/deep/ .el-table {
  width: 100%;
  height: 100%;
}
/deep/ .el-table__body-wrapper {
  height: calc(100% - 40px);
  overflow: hidden;
  &:hover {
    overflow: auto;
  }
}
/deep/ .cell {
  overflow: hidden;
  font-weight: normal;
  text-overflow: ellipsis;
  white-space: nowrap;/* 强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。 */

  /* 超出部分隐藏 */

  /* 隐藏部分以省略号代替 */
}
</style>
